<template>
  <div>
    <AcceptHandleHeadComponent
      ref="acceptHandleHeadRef"
      :ucolumns="ucolumns"
      :needDealNum="needDealNum"
      :type="LableTitle.acceptDraft"
      :needMoreQuery="true"
      @myEvent="myEvent"
      @setColumns="setColumns"
      @onSearch="onSearch"
      @onReset="reQuery"
    >
      <!-- 其他查询条件 -->
      <div slot="more">
        <a-form layout="inline" class="accept_more_operate_moreForm">
          <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse">
            <a-collapse-panel :show-arrow="false" disabled key="1">
              <div slot="header" class="accept_more_operate_moreForm_collapse_head">
                <a-row :gutter="48" style="width: 100%; font-weight: bold">
                  <a-col @click.stop="() => {}" :md="7" :sm="24">
                    <a-form-item label="申请人：">
                      <a-input
                        v-model="queryParam.f_applyname"
                        style="width: 145px"
                        placeholder="请输入申请人"
                        allowClear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col @click.stop="() => {}" :md="7" :sm="24">
                    <a-form-item label="被申请人：">
                      <a-input
                        v-model="queryParam.f_targetname"
                        style="width: 145px"
                        placeholder="请输入被申请人"
                        allowClear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col @click.stop="() => {}" :md="10" :sm="24">
                    <a-form-item style="display: flex; align-items: center">
                      <span style="margin-right: -10px">填报时间：</span>
                      <a-date-picker
                        style="margin-left: 10px"
                        v-model="queryParam.f_applystarttime"
                        :style="{ width: 'calc(50% - 70px)' }"
                        placeholder="开始日期"
                        format="YYYY-MM-DD"
                        allowClear
                        @change="subtimeListen()"
                      />
                      ~
                      <a-date-picker
                        v-model="queryParam.f_applyendtime"
                        :style="{ width: 'calc(50% - 70px)' }"
                        placeholder="结束日期"
                        format="YYYY-MM-DD"
                        allowClear
                        @change="subtimeListen()"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>

              <a-row :gutter="48" style="width: 100%" class="accept_more_operate_moreForm_collapse_body"> </a-row>
            </a-collapse-panel>
          </a-collapse>
        </a-form>
      </div>

      <template slot="content">
        <div v-if="currentTab == 'table'" class="accept_content_table">
          <!-- 表格数据 -->
          <a-table
            :scroll="scroll"
            :columns="ucolumns"
            :data-source="listData"
            :pagination="upagination"
            :loading="loading"
            rowKey="applyid"
            @change="tableChange"
            size="middle"
            :bordered="ubordered"
            :rowClassName="rowClassName"
            :components="header"
            ref="table"
            :key="tableCountKey"
          >
            <span slot="serial" slot-scope="text, record, index">
              {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
            </span>

            <div slot="isomissionSlot" slot-scope="isomission" class="overBox" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ isomission == 3200 ? '是' : isomission == 3201 ? '否' : '' }}</span>
                </template>
                {{ isomission == 3200 ? '是' : isomission == 3201 ? '否' : '' }}
              </a-tooltip>
            </div>

            <div
              slot="applynameSlot"
              slot-scope="applyname, record"
              class="beyond_hiding"
              style="width: 100%; text-align: left"
            >
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applyname }}</span>
                </template>
                <a href="javascript:;" class="cursor_pointer" @click="applyClick(record.applyid)">{{ applyname }} </a>
              </a-tooltip>
            </div>

            <div
              slot="targetnameSlot"
              slot-scope="targetname"
              class="beyond_hiding"
              style="width: 100%; text-align: left"
            >
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ targetname }}</span>
                </template>
                {{ targetname }}
              </a-tooltip>
            </div>

            <div slot="statusSlot" slot-scope="status" class="beyond_hiding" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ statusLable(status) }}</span>
                </template>
                {{ statusLable(status) }}
              </a-tooltip>
            </div>

            <div slot="acceptcodeSlot" slot-scope="acceptcode" class="beyond_hiding" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ acceptcode }}</span>
                </template>
                {{ acceptcode }}
              </a-tooltip>
            </div>

            <div slot="createtimeSlot" slot-scope="createtime" class="beyond_hiding" style="width: 100%">
              {{ createtime | getTimeFormat('YYYY年M月D日') }}
            </div>

            <!-- 	案件来源 -->
            <div slot="sourceSlot" slot-scope="source" class="beyond_hiding" style="width: 100%">
              {{ source in Tp_applysourceMap ? Tp_applysourceMap[source] : '' }}
            </div>

            <span slot="operation" slot-scope="text, record">
              <template>
                <a @click="handleForm(record.applyid, '3')">编辑</a>
                <a-divider type="vertical" />
                <a href="javascript:;" @click="handleForm(record.applyid, '4')">详情</a>
                <a-divider type="vertical" />
                <a-popconfirm
                  title="确定删除吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="handleDel(record.applyid)"
                >
                  <a-icon slot="icon" type="delete" />
                  <a style="color: #ca0000">删除</a>
                </a-popconfirm>
              </template>
            </span>
          </a-table>
        </div>
      </template>
    </AcceptHandleHeadComponent>
    <ApplyViewComponent ref="applyViewComponentRef" />
  </div>
</template>

<script>
import drag from '@/components/TableDrag/drag'
import { St_admreview } from '@/enumeration/St_admreview'
import { LableTitle } from '@/enumeration/LableTitle.js'
import { Tp_biztype } from '@/enumeration/Tp_biztype'
import { Tp_admpr } from '@/enumeration/Tp_admpr'
import { getReviewPage } from '@/api/accept/apl_admreview.js'
import { delApl_main } from '@/api/apply/apl_main.js'
import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
import { Tp_applysourceMap } from '@/enumeration/Tp_applysource.js'
import storage from 'store'

const ucolumns = [
  {
    title: '序号',
    width: 50,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '案号',
    dataIndex: 'acceptcode',
    key: 'acceptcode',
    align: 'center',
    width: 250,
    scopedSlots: { customRender: 'acceptcodeSlot' }
  },
  {
    title: '申请人',
    dataIndex: 'applyname',
    key: 'applyname',
    align: 'center',
    width: 150,
    scopedSlots: { customRender: 'applynameSlot' }
  },
  {
    title: '被申请人',
    dataIndex: 'targetname',
    key: 'targetname',
    align: 'center',
    width: 250,
    scopedSlots: { customRender: 'targetnameSlot' }
  },
  {
    title: '是否行政不作为',
    dataIndex: 'isomission',
    key: 'isomission',
    align: 'center',
    width: 140,
    scopedSlots: { customRender: 'isomissionSlot' }
  },
  {
    title: '录入人员',
    key: 'regusername',
    dataIndex: 'regusername',
    align: 'center',
    width: 150
  },
  {
    title: '填报时间',
    dataIndex: 'createtime',
    key: 'createtime',
    align: 'center',
    width: 200,
    scopedSlots: { customRender: 'createtimeSlot' }
  },
  {
    title: '案件来源',
    width: 150,
    dataIndex: 'source',
    align: 'center',
    scopedSlots: { customRender: 'sourceSlot' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    width: 150,
    scopedSlots: { customRender: 'statusSlot' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 200,
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  data () {
    return {
      Tp_applysourceMap: Tp_applysourceMap,
      applyid: null,
      ucolumns: ucolumns,
      // columns: columns,
      cardColumns: ucolumns,
      needDealNum: undefined,
      queryParam: {
        f_acceptcode: '', // 案号
        f_applyname: '', // 申请人
        f_regusername: '', // 录入人
        f_targetname: '', // 被申请人
        f_applystarttime: null, // 开始时间
        f_applyendtime: null, // 结束时间
        pageNumber: 1,
        pageSize: 20,
        sort: 'createtime',
        order: 'desc',
        f_status: null
      },
      listData: [],
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: total => `共计 ${total} 条数据`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      loading: false,
      ubordered: true, // 表格边框是否显示
      mixins: [drag],
      St_admreview: St_admreview,
      Tp_biztype: Tp_biztype,
      Tp_admpr: Tp_admpr,
      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT), // 登录人部门
      sourceType: [],
      LableTitle: LableTitle,
      currentTab: 'table',
      header: undefined,
      tableCountKey: 0,
      collapseKey: [], // 折叠面板key
      scroll: { x: 1000, y: 440 }
    }
  },
  components: {
    AcceptHandleHeadComponent: () => import('@/views/accept/component/AcceptHandleHeadComponent.vue'),
    ApplyViewComponent: () => import('@/views/accept/component/ApplyViewComponent.vue')
  },
  created () {
    try{
      if(localStorage.getItem('AppeptExamineDraft')){
        this.queryParam = JSON.parse(localStorage.getItem('AppeptExamineDraft'))
        console.log('this.queryParam.AppeptExamineDraft',this.queryParam);
      }
    }catch{
      console.log('路由传参非json格式')
    }

    this.headerChange()
    // 待处理人员
    this.queryParam.f_status = this.St_admreview['written'].value
    this.queryParam.reguserid = this.currentUser.userId
    this.queryList()
    this.headerChange()
    localStorage.removeItem('AppeptExamineDraft');
  },
  watch: {
    ucolumns: {
      handler (newValue, oldVal) {
        this.headerChange()
      },
      deep: true // 深度监听
    }
  },
  methods: {
    myEvent (e) {
      if (e) {
        this.scroll.y = this.scroll.y + e
      } else {
        this.scroll.y = 440
      }
    },
    headerChange () {
      console.log('移动后', this.ucolumns)
      this.header = {
        header: {
          cell: drag.methods.initDrag(this.ucolumns)
        }
      }
    },
    setColumns (columns) {
      console.log('重置前', this.ucolumns)
      // tableCountKey自增是为了让表格控件每次销毁强制更新
      this.tableCountKey += 1
      this.ucolumns = columns
      // this.ucolumns = columns
      console.log('重置后', this.ucolumns)
    },
    /**
     * 显示处理界面
     */
    showHand (record, pattern) {
      console.log('record', record.taskid)
      this.$router.push({
        path: `/AppeptExamineHandleOperation/${record.taskid}/${pattern}`,
        query: {
          url: '/AppeptExamineHandle',
          queryParam: record
        }
      })
    },

    onSearch (val) {
      this.queryParam.pageNumber = 1
      this.queryParam.f_acceptcode = ''
      if (val) {
        this.queryParam.f_acceptcode = val.toString().trim()
      }
      this.queryList()
    },
    // 申请人详情弹框
    applyClick (applyid) {
      this.$refs.applyViewComponentRef.f_init(applyid)
    },
    // 删除未提交案件
    async handleDel (applyid) {
      const { code } = await delApl_main(applyid)
      if (code == 0) {
        this.$message.success('操作成功')
        this.queryList()
      }
    },

    // 进入申报页面
    handleForm (applyid, pattern) {
      this.$router.push({
        path: `/AcceptRecordAdd/${applyid}/100000_360100-000201009000-QT-002-02/${pattern}`,
        query: {
          url: '/AppeptExamineDraft',
          queryParam: this.queryParam,
        }
      })
      console.log('this.queryParam',this.queryParam);
    },
    // 接收时间监听判断开始结束日期是否合理
    subtimeListen () {
      if (
        this.queryParam.f_applystarttime > this.queryParam.f_applyendtime &&
        this.queryParam.f_applystarttime &&
        this.queryParam.f_applyendtime
      ) {
        this.queryParam.f_applystarttime = undefined
      }
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery () {
      this.queryParam = {
        f_acceptcode: '', // 案号
        f_applyname: '', // 申请人
        f_regusername: '', // 录入人
        f_targetname: '', // 被申请人
        f_applystarttime: null, // 开始时间
        f_applyendtime: null, // 结束时间
        pageNumber: 1,
        pageSize: 20,
        sort: 'createtime',
        order: 'desc',
        f_status: null
      }
      this.queryParam.f_status = this.St_admreview['written'].value
      this.queryParam.reguserid = this.currentUser.userId
      this.queryList()
    },

    tableChange (upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryList()
    },

    getCpQueryParam () {
      // 时间转换
      const cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.f_applystarttime?.format) {
        cpQueryParam.f_applystarttime = this.queryParam.f_applystarttime.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.f_applyendtime?.format) {
        cpQueryParam.f_applyendtime = this.queryParam.f_applyendtime.format('YYYY-MM-DD') + ' 23:59:59'
      }
      return cpQueryParam
    },

    queryList () {
      const queryParam = this.getCpQueryParam()
      if (queryParam.f_acceptcode) {
        queryParam.f_acceptcode = queryParam.f_acceptcode.toString().trim()
      }
      if (queryParam.f_targetname) {
        queryParam.f_targetname = queryParam.f_targetname.toString().trim()
      }
      if (queryParam.f_applyname) {
        queryParam.f_applyname = queryParam.f_applyname.toString().trim()
      }
      this.loading = true
      getReviewPage(queryParam)
        .then(res => {
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
          } else {
            this.listData = res.data.records
            this.upagination.total = res.data.total
            this.upagination.current = res.data.current
            this.upagination.pageSize = res.data.size
            this.needDealNum = res.data.total
          }
        })
        .catch(err => {
          this.listData = []
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 修改对应的状态
    statusLable (val) {
      for (const key in this.St_admreview) {
        if (this.St_admreview[key].value == val) {
          return this.St_admreview[key].name
        }
      }
      return val
    },
    rowClassName (record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';
</style>

<style lang="scss" scoped>
@import '~@/assets/css/apply/breathingLamp.scss';
.accept_content {
  &_table {
    &_font_red {
      color: #ca0000;
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
    }

    ::v-deep .ant-table-row-cell-break-word {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
      color: #2c2c2c;
    }

    ::v-deep .ant-table-thead > tr > th {
      height: 50px;
    }

    // ::v-deep .ant-pagination-total-text {
    //   font-size: 16px;
    //   font-family: 'PingFang-SC-Heavy';
    //   font-weight: 400;
    //   color: #8e97b9;
    // }

    ::v-deep .ant-table-body,
    .ant-table-header {
      word-break: break-all;
      &::-webkit-scrollbar {
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        // height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #a2c6e1;
      }
      &::-webkit-scrollbar-track {
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background: transparent;
      }
    }
  }
}
</style>
